<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<!-- <view class="h2">
			我的
		</view> -->
		<view class="header" @tap="userInfo.is_leader != 1 && userInfo.is_manager != 1 ? routerTo('/pages/pageB/data/infoDetil') : ''">
			<image class="avatar" :src="userInfo.avatar" mode=""></image>
			<view class="info">
				<view class="one">
					<view class="name">
						{{ userInfo.nickname }}
					</view>
					<view class="post">
						{{ userInfo.department_name }}
					</view>
				</view>
				<view class="one">
					<view class="name">
						{{ userInfo.username }}
					</view>
					<view class="name">
						工龄 {{ userInfo.years }} 年
					</view>
				</view>
			</view>
		</view>
		<ul>
			<li @tap="routerTo('/pages/my/secure')">
				<view class="msg">
					账号与安全
				</view>
				<image class="right" src="@/static/img/right.png" mode=""></image>
			</li>
			<li @tap="routerTo('/pages/my/privacy')">
				<view class="msg">
					隐私
				</view>
				<image class="right" src="@/static/img/right.png" mode=""></image>
			</li>
			<li>
				<view class="msg">
					版本号
				</view>
				<view class="msg">
					{{version}}
				</view>
			</li>
		</ul>
		<view class="btn" @tap="show = true">
			退出登录
		</view>
		<u-modal :show="show" :content='content' :showCancelButton="true" :closeOnClickOverlay="true" @confirm="outLogin" @close="show = false" @cancel="show = false"></u-modal>
		<innerTabbar seleTabbar="3"></innerTabbar>
	</view>
</template>

<script>
	import {
		innerinfo
	} from '@/api/inner.js'
	import {
		getConfigs
	} from '@/api/user.js'
	import innerTabbar from '@/components/innerTabbar.vue';
	export default{
		components: {
			innerTabbar
		},
		data(){
			return{
				userInfo:{},
				seleUrl:'',
				version:'',
				watermark:'',
				show:false,
				content:'退出后需重新登录，确认退出吗'
			}
		},
		onLoad() {
			getConfigs({
				name: 'version'
			}).then((res) => {
				this.version = res.data.value
			});
			this.getUserInfo()
			this.watermark = uni.getStorageSync('watermark')
		},
		methods:{
			async getUserInfo(){
				let res = await innerinfo()
				this.userInfo = res.data
				this.seleUrl = res.data.avatar
			},
			outLogin(){
				uni.removeStorageSync('token')
				uni.removeStorageSync('enterprise')
				uni.removeStorageSync('watermark')
				uni.showToast({
					title:'退出成功'
				})
				let time = setTimeout(()=>{
					uni.reLaunch({
						url:'/pages/login/login'
					})
				},1000)
			},
			routerTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		height: calc(100vh - 44px);
		background-color: #F9FBFC;
		.h2{
			padding: 20px;
				font-size: 22px;
				color: #232323;
				background-color: #fff;
				font-weight: 700;
		}
		.header {
			padding: 60px 0 30px 25px;
			background-color: #0a80f8;
			border-radius: 0 0 20px 20px;
			display: flex;
			align-items: center;
			color: #fff;
			// margin-bottom: 15px;
			.avatar {
				width: 68px;
				height: 68px;
				border-radius: 1000px;
				margin-right: 10px;
			}
			.info {
				.one {
					display: flex;
					align-items: center;
					margin-bottom: 15px;
					.name {
						margin-right: 7px;
					}
					.post {
						font-size: 10px;
						color: #0a80f8;
						padding: 2px 6px;
						background-color: #fff;
						border-radius: 4px;
					}
				}
				.one:last-child{
					.name{
						font-size: 12px;
					}
				}
			}
		}
		ul{
			width: 100%;
			background-color: #fff;
			margin-bottom: 15px;
			li{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 20px;
				color: #3D3D3D;
				position: relative;
				.avatar{
					image{
						width: 27px;
						height: 27px;
						border-radius: 100px;
					}
				}
				.txt{
					color: #3D3D3D;
				}
				.right{
					width: 15px;
					height: 15px;
					position: absolute;
					right: 10px;
				}
			}
			li:first-child{
				padding-right: 30px;
			}
		}
		.btn{
			width: 100%;
			text-align: center;
			color: #3D3D3D;
			padding: 15px 0;
			background-color: #fff;
		}
	}
</style>